Tools
The only things you need to change the template are a text editor and a browser, to see the outcome. For the text editor I recommend Notepad++, which is free.
The logo used in the template preview is an image 220x180px, but there are no width/height restrictions related to the structure of the template so you can use the logo on the size you prefer.
<!-- START SITE HEADER --> <header class="site-header"> <div class="site-logo onstart animated" data-animation="fadeInDown" data-animation-delay="1200"> <img src="images/logo.png" alt="" /> </div> </header> <!-- END SITE HEADER -->
You can easy change the page background. To learn more, go to the next section.
You can change the backgroound color at line 118 of style.css:
body {
line-height: 1;
color: #fff;
font-size: 16px;
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-style: normal;
font-weight: normal;
line-height: 28px;
background: #ffffff;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
overflow-x: hidden;
white-space: normal;
position: relative;
}
In order to add a fullscreen image to a page, you have to add the clsss image-background to the body. Example:
<body class="image-background">
You can change the image of the home section at line 173 of main.js:
$("body").backstretch([
"http://placehold.it/1920x1200"
]);
In order to add a fullscreen image slider to a page, you have to add the class slideshow-background to the body. Example:
<body class="slideshow-background">
You can change the images of the page at line 179 of main.js:
$("body").backstretch([
"http://placehold.it/1920x1200",
"http://placehold.it/1920x1200",
"http://placehold.it/1920x1200",
], {duration: 3000, fade: 1200});
You can also change the duration of the slide and the transition time, each value is in milliseconds.
Add the div tag with class overlay. Add the div tag with class gradient-overlay gradient-4 opacity-100. Example:
<!-- OVERLAY --> <div class="overlay"> <div class="gradient-overlay gradient-4 opacity-90"></div> <div class="overlay-frame"></div> </div>
You can use default gradients from 1 to 19. You can use default opacity class from 0 to 100 every 5. Example: opacity-70, opacity-75, opacity-80.
In order to add a parallax background to a page, you have to add the class parallax-background and image class to the div. Example:
<div class="section parallax-background image-2" id="section1">
You can change the image at line 2247 of style.js:
/* ==================================================================
22.0 Image Backgrounds
================================================================== */
.image-1 {
background-image: url(http://placehold.it/1920x1080.jpg);
}
In order to add a video background to a page, you have to add the class video-background to the body. Example:
<body class="video-background">
You can easy change the page or section background. Example:
<!-- HTML5 VIDEO --> <video id="video_background" class="video_bg" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0"> <source src="my-video-url.mp4" type="video/mp4"> <source src="my-video-url.ogv" type="video/ogg"> <source src="my-video-url.webm" type="video/webm"> </video> <!-- END HTML5 VIDEO -->
You can change the image for mobile devices at line 221 of main.js:
// Default background on mobile devices
$("body").backstretch([
"http://placehold.it/1920x1080"
]);
<!-- VIDEO -->
<div id="video_background" class="video_bg">
<a class="player" data-property="{videoURL:'youtube-video-url', containment:'body', autoPlay:true, mute:true, quality: 'small', startAt:0, showControls:false, opacity:1}"></a>
</div>
<!-- END VIDEO -->
Replace youtube-video-url to the link to the video.
You can change the image for mobile devices at line 189 of main.js:
// Default background on mobile devices
$("body").backstretch([
"http://placehold.it/1920x1080"
]);
<!-- VIDEO --> <div id="video_background" class="video_bg"> <a class="player"></a> </div> <!-- END VIDEO -->
var videos = [
{videoURL: "youtube-video-url",containment:'body',autoPlay:true, mute:true, startAt:0,opacity:1, loop:false, ratio:"4/3", addRaster:true},
{videoURL: "youtube-video-url",containment:'body',autoPlay:true, mute:true, startAt:0,opacity:1, loop:false, ratio:"4/3", addRaster:false},
{videoURL: "youtube-video-url",containment:'body',autoPlay:true, mute:true, startAt:0,opacity:1, loop:false, ratio:"4/3", addRaster:true}
];
$(".player").YTPlaylist(videos, true);
Replace youtube-video-url to the link to the video in main.js file.
You can change the image for mobile devices at line 202 of main.js:
// Default background on mobile devices
$("body").backstretch([
"http://placehold.it/1920x1080"
]);
Each part of the template is organizedinto sections. As you can see in the HTML files, each section is independent from the others: this gives you the flexibility to copy/paste/delete sections and create your layout.
<!-- HOME SECTION --> <div class="section home active cover-background image-1" id="section0"> <!-- START CONTAINER --> <div class="container"> <div class="row"> <div class="col-md-10 col-md-offset-1"> <!-- START SLIDE CONTENT--> <div class="slide-content"> <div class="flexslider textslider onstart animated" data-animation="fadeInUp" data-animation-delay="800"> <ul class="slides"> <li> <h1 class="rotate uppercase">We're <span class="font-normal">Creative<br>Studio</span> from Sydney</h1> </li> <li> <h1 class="rotate uppercase"><span class="font-normal">Awesome</span> Style in<br>every <span class="font-normal">single way</span></h1> </li> <li> <h1 class="rotate uppercase">Branding & <span class="font-normal">creative<br>digital</span> solution</h1> </li> </ul> </div> <p class="lead onstart animated" data-animation="fadeInUp" data-animation-delay="1000">Our Website Is Coming Soon</p> <a href="#" class="border-button bt-border-white go-slide onstart animated" data-animation="fadeInUp" data-animation-delay="1200" data-slide="2">Subscribe</a> <a href="#" class="default-button bt-transparent go-slide onstart animated" data-animation="fadeInUp" data-animation-delay="1200" data-slide="3">Learn more <i class="fa fa-angle-down"></i></a> </div><!-- END SLIDE CONTENT--> </div> </div><!-- END ROW --> </div><!-- END CONTAINER --> <!-- OVERLAY --> <div class="overlay"> <div class="gradient-overlay background-blue-dark opacity-20"></div> </div> </div>
<!-- HOME SECTION --> <div class="section home active cover-background image-1" id="section0"> <!-- START CONTAINER --> <div class="container"> <div class="row"> <div class="col-md-10 col-md-offset-1"> <!-- START SLIDE CONTENT--> <div class="slide-content"> <div id="clock" class="onstart animated" data-animation="fadeInUp" data-animation-delay="600"></div> <h3 class="color-white onstart animated no-top-margin" data-animation="fadeInUp" data-animation-delay="800">Our website is under construction. We`ll be here soon with our new awesome site, subscribe to be notified.</h3> <a href="#" class="border-button bt-border-white go-slide onstart animated" data-animation="fadeInUp" data-animation-delay="1000" data-slide="2">Subscribe</a> <a href="#" class="default-button bt-transparent go-slide onstart animated" data-animation="fadeInUp" data-animation-delay="1000" data-slide="3">Learn more <i class="fa fa-angle-down"></i></a> </div><!-- END SLIDE CONTENT--> </div> </div><!-- END ROW --> </div><!-- END CONTAINER --> <!-- OVERLAY --> <div class="overlay"> <div class="gradient-overlay background-blue-dark opacity-20"></div> </div> </div>
<!-- SUBSCRIBE SECTION --> <div class="section cover-background image-2" id="section1"> <!-- START CONTAINER --> <div class="container"> <div class="row"> <div class="col-md-10 col-md-offset-1"> <!-- START SECTION HEADER --> <div class="section-header color-white"> <!-- START TITLE --> <h2 class="section-title animated" data-animation="fadeInUp">Subscribe To Our Newsletter</h2><!-- END TITLE --> <div class="line-separate line-white line-center animated" data-animation="fadeInUp" data-animation-delay="200"><span></span></div> </div><!-- END SECTION HEADER --> <!-- START SLIDE CONTENT--> <div class="slide-content"> <p class="animated" data-animation="fadeInUp" data-animation-delay="200">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <!-- Subscribe Form --> <div class="form animated" data-animation="fadeInUp" data-animation-delay="400"> <div class="form-container"> <div class="page-section" id="signup"> <form class="subscription-form mailchimp" method="post" id="mc-form"> <input type="email" id="email" class="border-radius-22 no-bottom-margin" name="email" placeholder="Enter Your Email Address" /> <button type="submit" id="subscribebtn" class="border-button no-bottom-margin">Subscribe</button> </form> <p class="error-message"></p> <p class="success-message"></p> </div><!--end page section --> </div><!-- end form container --> </div><!-- end Subscribe Form --> </div><!-- END SLIDE CONTENT--> </div> </div><!-- END ROW --> </div><!-- END CONTAINER --> <!-- OVERLAY --> <div class="overlay"> <div class="gradient-overlay background-blue-dark opacity-20"></div> </div> </div>
<!-- ABOUT SECTION --> <div class="section cover-background image-3" id="section2"> <!-- START CONTAINER --> <div class="container"> <div class="row"> <div class="col-md-10 col-md-offset-1"> <!-- START SECTION HEADER --> <div class="section-header"> <!-- START TITLE --> <h2 class="section-title animated" data-animation="fadeInUp">About Us</h2><!-- END TITLE --> <div class="line-separate line-white line-center animated" data-animation="fadeInUp" data-animation-delay="200"><span></span></div> </div><!-- END SECTION HEADER --> <!-- START SLIDE CONTENT--> <div class="slide-content animated" data-animation="fadeInUp" data-animation-delay="400"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae orci nec sapien posuere tincidunt ut sit amet magna. Ut a enim in orci feugiat fringilla id in ipsum. Integer condimentum viverra nunc vitae sodales. Nunc viverra iaculis bibendum. Pellentesque scelerisque eleifend diam at convallis. Duis quis justo pretium, sagittis nisi a, viverra ligula. Curabitur interdum augue elit, sit amet accumsan eros efficitur a. Integer venenatis ligula at lobortis lacinia.</p> <div class="row"> <div class="col-md-6"> <!-- START FEATURES-LIST --> <div class="features-list"> <!-- FEATURE --> <div class="feature-item"> <div class="feature-icon"> <i class="ion-ios-speedometer-outline"></i> </div> <div class="feature-text"> <h3>Lightning Fast</h3> <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p> </div> </div> <!-- FEATURE --> <div class="feature-item"> <div class="feature-icon"> <i class="ion-ios-heart-outline"></i> </div> <div class="feature-text"> <h3>You’re going to love it</h3> <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p> </div> </div> </div><!-- END FEATURES-LIST --> </div> <div class="col-md-6"> <!-- START FEATURES-LIST --> <div class="features-list"> <!-- FEATURE --> <div class="feature-item"> <div class="feature-icon"> <i class="ion-ios-albums-outline"></i> </div> <div class="feature-text"> <h3>Beautiful Animations</h3> <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p> </div> </div> <!-- FEATURE --> <div class="feature-item"> <div class="feature-icon"> <i class="ion-ios-timer-outline"></i> </div> <div class="feature-text"> <h3>Huge Time Saver</h3> <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p> </div> </div> </div><!-- END FEATURES-LIST --> </div> </div> </div><!-- END SLIDE CONTENT--> </div> </div><!-- END ROW --> </div><!-- END CONTAINER --> <!-- OVERLAY --> <div class="overlay"> <div class="gradient-overlay background-blue-dark opacity-20"></div> </div> </div>
<!-- Contact Section --> <div class="section cover-background image-5" id="section4"> <div class="container"> <div class="row"> <div class="col-md-10 col-md-offset-1"> <div class="section-header"> <!-- Section Title --> <h2 class="section-title animated" data-animation="fadeInUp">Do You Have a Question ?</h2><!-- END TITLE --> <div class="line-separate line-white line-center animated" data-animation="fadeInUp" data-animation-delay="200"><span></span></div> </div> <!-- Slide Content --> <div class="slide-content"> <p class="animated" data-animation="fadeInUp" data-animation-delay="400">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <div class="contact-form animated" data-animation="fadeInUp" data-animation-delay="600"> <form class="mb-0" id="cf" name="cf" action="include/sendemail.php" method="post"> <div class="row"> <div class="form-process"></div> <div class="col-md-6 col-sm-6"> <div class="form-group"> <input type="text" id="cf-name" name="cf-name" placeholder="Enter your name" class="required"> </div> </div> <div class="col-md-6 col-sm-6"> <div class="form-group"> <input type="email" id="cf-email" name="cf-email" placeholder="Enter your email address" class="required"> </div> </div> <div class="col-md-12 col-sm-12"> <div class="form-group"> <input type="text" id="cf-subject" name="cf-subject" placeholder="Subject (Optional)" class="light"> </div> </div> <div class="col-md-12 mb-20"> <div class="form-group"> <textarea name="cf-message" id="cf-message" placeholder="Here goes your message" class="required" rows="7"></textarea> </div> </div> <div class="col-md-12 hidden"> <input type="text" id="cf-botcheck" name="cf-botcheck" value="" /> </div> <div class="col-md-12 text-center"> <button class="border-button" type="submit" id="cf-submit" name="cf-submit">Send Message</button> </div> </div> </form> <div class="response-message contact-form-result text-center pt-10"></div> </div> </div> </div> </div> </div> <!-- Overlay --> <div class="overlay"> <div class="gradient-overlay background-blue-dark opacity-30"></div> </div> </div>
<!-- FEATURES SECTION --> <div class="section cover-background image-4" id="section3"> <!-- START CONTAINER --> <div class="container"> <div class="row"> <div class="col-md-10 col-md-offset-1"> <!-- START SECTION HEADER --> <div class="tour-header"> <!-- START TITLE --> <h2 class="section-title animated" data-animation="fadeInUp">Our Services</h2><!-- END TITLE --> <div class="line-separate line-white line-center animated" data-animation="fadeInUp" data-animation-delay="200"><span></span></div> </div><!-- END SECTION HEADER --> <!-- START SLIDE CONTENT--> <div class="slide-content"> <p class="animated" data-animation="fadeInUp" data-animation-delay="400">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <!-- SERVICE --> <div class="col-md-4 service animated" data-animation="fadeInLeft" data-animation-delay="800"> <div class="service-icon"> <i class="ion-ios-book-outline"></i> </div> <h3>Well Documented</h3> <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</p> </div> <!-- SERVICE --> <div class="col-md-4 service animated" data-animation="fadeInUp" data-animation-delay="600"> <div class="service-icon"> <i class="ion-ios-speedometer-outline"></i> </div> <h3>Fully Responsive</h3> <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</p> </div> <!-- SERVICE --> <div class="col-md-4 service animated" data-animation="fadeInRight" data-animation-delay="800"> <div class="service-icon"> <i class="ion-ios-box-outline"></i> </div> <h3>Amazing Features</h3> <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</p> </div> </div><!-- END SLIDE CONTENT--> </div> </div><!-- END ROW --> </div><!-- END CONTAINER --> <!-- OVERLAY --> <div class="overlay"> <div class="gradient-overlay background-blue-dark opacity-20"></div> </div> </div>
Given this example, you can select all the code between line 1 and 10, then copy/cut and paste before/after a specific section or between other sections.
In order to add the title to a section, you have to add the h3 tag with class section-title.
Example:
<!-- FEATURES SECTION --> <div class="slide-item" data-slide-id="5"> <!-- START CONTAINER --> <div class="container"> <div class="row"> <div class="col-md-10 col-md-offset-1"> <!-- START SECTION HEADER --> <div class="tour-header"> <!-- START TITLE --> <h2 class="section-title animated" data-animation="fadeInUp" data-animation-out="fadeOutDown" data-animation-out-delay="1000">Our Services</h2><!-- END TITLE --> <div class="line-separate line-white line-center animated" data-animation="fadeInUp" data-animation-out="fadeOutDown" data-animation-delay="200" data-animation-out-delay="800"><span></span></div> </div><!-- END SECTION HEADER -->
Changing contents of the template is very simple, you only have to search for the text you want to edit on index.html and replace it with your own text..
You can easily align text by adding the appropriate class.
To align text to the left, add a class text-left.
<p class="text-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<p>
To align text to the right, add a class text-right.
<p class="text-right">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<p>
To align text to the center, add a class text-center.
<p class="text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<p>
To justify text add a class text-justify.
<p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<p>
Icons are based on Font Awesome, the iconic font designed for use with Bootstrap.
<a href="#" class="facebook"><i class="fa fa-facebook"></i></a>
Replace the class of the i to change the icon (on services section, i is replaced by span tag). Look at Font Awesome for the complete list of the available icons.
The template uses entirely Google Web Fonts, you have the flexibility to change the font in no time and you have 600+ fonts at your disposal.
To change the font:
- Head over Google Web Fonts list.
- Choose your font and click on Quick-use.
- Search for Add this code to your website then copy the line of code that you have found, it'is something like the line below:
<link href='http://fonts.googleapis.com/css?family=Pirata+One' rel='stylesheet' type='text/css'>
- Replace on index.html, line 41, with the line you just copied:
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300' rel='stylesheet' type='text/css'>
- On style.css search for 'Open Sans' and replace with, given the example above, 'Pitata One'.
As you can see in the HTML files, images of the online preview have been replaced with placeholders. Width and Height of each placeholder image are NOT the ideal size of the images. Each image is responsive-friendly via the addition of the img-responsive class so that it scales nicely to the parent element.
Example:
<img class="img-responsive" src="http://placehold.it/350x250/55ACEE/000000&text=Your+responsive+image" alt="Your responsive image" />
You can set the countdown, simply adding the countdown class and the data-countdown attribute, as you can see on example:
<div data-countdown="2016/4/21 12:00:00" class="countdown onstart animated" data-animation="fadeInUp" data-animation-delay="600"></div>
By default we use Mailchimp. Code:
<!-- Subscribe Form --> <div class="form animated" data-animation="fadeInUp" data-animation-delay="400"> <div class="form-container"> <div class="page-section" id="signup"> <form class="subscription-form mailchimp" method="post" id="mc-form"> <input type="email" id="email" class="border-radius-20 no-bottom-margin" name="email" placeholder="Enter Your Email Address" /> <button type="submit" id="subscribebtn" class="default-button bt-red no-bottom-margin">Subscribe</button> </form> <p class="error-message"></p> <p class="success-message"></p> </div><!--end page section --> </div><!-- end form container --> </div><!-- end Subscribe Form -->
Add the Mailchimp Post URL at line 259 of main.js:
/* MAILCHIMP */
$('.mailchimp').ajaxChimp({
callback: mailchimpCallback,
url: "mailchimp-post-url" //Replace this with your own mailchimp post URL. Don't remove the "". Just paste the url inside "".
});
To obtain the code for your MailChimp Form Action:
1. Log into your MailChimp account.
2. Click the Lists button in the left navigation bar.
3. Click the drop-down box on the right, and choose Signup forms.
4. Choose Embedded forms.
5. On the Embedded form code page, click on Naked.
6. Scroll down and locate Copy/paste onto your site.
7. Double-click anywhere in the box to select the code.
8. Copy the code to your clipboard (use CMD-C for Mac or CTRL-C for Windows).
9. Paste the code into any text editor so that you can view it.
10. The only line of this code that you need is the action attribute value in the opening form tag. Reading from the top of the code, it's located between the second set of quotation marks. Don’t select the quotation marks themselves, just what's inside them.
Copy the selected action attribute value to your clipboard and paste the action attribute value into the mailchimp-post-url at line 489 of main.js.
11. Test things out by subscribing to your own MailChimp newsletter.
To set up the contact form, you have to replace few default values on sendemail.php with your own.
$toemails[] = array( 'email' => 'youremail@adress.com', // Your Email Address 'name' => 'Your Name' // Your Name );
You can animate each single element of the template, simply adding the animated class and the data-animation attribute, as you can see on example:
Example:
<img src="http://placehold.it/940x440" alt="" class="img-responsive animated" data-animation="fadeInUp">
The animation is triggered when the element is visible in the viewport. Take a look here for a complete list of the animations available.
You can animate each single element of the template when the page is loaded, simply adding the onstart class.Example
<img src="http://placehold.it/940x440" alt="" class="img-responsive onstart animated" data-animation="fadeInUp">
See in action in shortcodes.html.
<a href="#" class="default-button">Default Button</i></a> <a href="#" class="default-button bt-blue">Default Button</a> <a href="#" class="default-button bt-green">Default Button</a> <a href="#" class="default-button bt-turkus">Default Button</a> <a href="#" class="default-button bt-orange">Default Button</a> <a href="#" class="default-button bt-red">Default Button</a> <a href="#" class="default-button bt-grey">Default Button</a> <a href="#" class="default-button bt-transparent">Default Button</a> <a href="#" class="default-button bt-transparent-dark">Default Button</a>
<a href="#" class="sm-button">Small Button</a> <a href="#" class="sm-button bt-blue">Small Button</a> <a href="#" class="sm-button bt-green">Small Button</a> <a href="#" class="sm-button bt-turkus">Small Button</a> <a href="#" class="sm-button bt-orange">Small Button</a> <a href="#" class="sm-button bt-red">Small Button</a> <a href="#" class="sm-button bt-grey">Small Button</a> <a href="#" class="sm-button bt-transparent">Small Button</a> <a href="#" class="sm-button bt-transparent-dark">Small Button</a>
<a href="#" class="border-button">Border Button</a> <a href="#" class="border-button border-bt-blue">Border Button</a> <a href="#" class="border-button border-bt-green">Border Button</a> <a href="#" class="border-button border-bt-turkus">Border Button</a> <a href="#" class="border-button border-bt-orange">Border Button</a> <a href="#" class="border-button border-bt-red">Border Button</a> <a href="#" class="border-button border-bt-grey">Border Button</a>
<a href="#" class="border-sm-button">Small Border Button</a> <a href="#" class="border-sm-button border-bt-blue">Small Border Button</a> <a href="#" class="border-sm-button border-bt-green">Small Border Button</a> <a href="#" class="border-sm-button border-bt-turkus">Small Border Button</a> <a href="#" class="border-sm-button border-bt-orange">Small Border Button</a> <a href="#" class="border-sm-button border-bt-red">Small Border Button</a> <a href="#" class="border-sm-button border-bt-grey">Small Border Button</a>
Social Icons
Example: